<template>
    <MyHome></MyHome>
  <!-- 中间的大图片的盒子 -->
  <div class="bigimage_">
    <!-- 登录界面 还没有登录的界面-->
    <div class="login" v-if="channel.isLogin === false">
      <div class="title" @click="aaa" >风行旅途火车购票登录系统</div>
      <input type="text" placeholder="请输入账户名" class="input1" v-model="username">
      <input type="password" placeholder="请输入密码" class="input1" v-model="password">
      <div class="allbtn">
        <!-- 登录按钮 -->
        <el-button @click="login" type="success" plain class="btu1">登录</el-button>
        <el-button @click="$router.push('/register')" type="primary" plain class="btu2">注册</el-button>
      </div>
    </div>

    <!-- 登录成功后的界面 -->
    <div class="login" v-if="channel.isLogin === true" style="font-size: 20px;">
      您好啊，{{ channel.loginList[channel.logininfoid-1].name }}！
    </div>


    <!-- 大图片 -->
    <el-carousel height="auto" indicator-position="none" arrow="never" v-if="a" >
      <el-carousel-item style="height: 450px">
        <img :src="a" alt="cw" class="img2">
      </el-carousel-item>

      <el-carousel-item style="height: 450px">
        <img :src="b" alt="cw" class="img2">
      </el-carousel-item>
    </el-carousel>
  </div>

  <!-- 下面的菜单栏 -->
  <div class="menu_">
<!-- 第一个menu -->
    <div class="menu1">
      <img src="../assets/图标/图标_人_飞机&机上盗窃人员_线.png" alt="cw" class="menu1_img">
      <div>重点旅客</div>
    </div>
<!-- 第二个menu -->
    <div class="menu1">
      <img src="../assets/图标/遗失物品管理.png" alt="cw" class="menu1_img">
      <router-link to="/hotel" style="text-decoration: none; color: inherit;">酒店预订</router-link>
    </div>
<!-- 第三个menu -->
    <div class="menu1">
      <img src="../assets/图标/网约车.png" alt="cw" class="menu1_img">
      <div>约车服务</div>
    </div>
<!-- 第四个menu -->
    <div class="menu1">
      <img src="../assets/图标/托运.png" alt="cw" class="menu1_img">
      <div>便民托运</div>
    </div>
<!-- 第五个menu -->
    <div class="menu1">
      <img src="../assets/图标/火车站.png" alt="cw" class="menu1_img">
      <div>车站引导</div>
    </div>
<!-- 第六个menu -->
    <div class="menu1">
      <img src="../assets/图标/来源分析.png" alt="cw" class="menu1_img">
      <div>站车风采</div>
    </div>
<!-- 第七个menu -->
    <div class="menu1">
      <img src="../assets/图标/用户反馈.png" alt="cw" class="menu1_img">
      <div>用户反馈</div>
    </div>

  </div>

  <!-- 四个盒子 -->
  <div class="fourbox_">
    <div class="smallbox">
      <img src="https://www.12306.cn/index/images/abanner01.jpg" alt="cw" class="img">
    </div>
    <div class="smallbox">
      <img src="https://www.12306.cn/index/images/abanner02.jpg" alt="cw" class="img">
    </div>
    <div class="smallbox">
      <img src="https://www.12306.cn/index/images/abanner03.jpg" alt="cw" class="img">
    </div>
    <div class="smallbox">
      <img src="https://www.12306.cn/index/images/abanner04.jpg" alt="cw"  class="img">
    </div>
  </div>

</template>

<script setup>
import { ElMessage } from 'element-plus'
import MyHome from './top/MyHome.vue';
import { ref } from 'vue'
import { useCounterStore } from '../stores/counter'
import { onMounted} from 'vue'
// import {onCreated} from 'vue'
const channel = useCounterStore()
const a = ref();
const b = ref();
const ran = ref();
const ran1 = ref();
const aaa = () => {
  // console.log(channel.newsListdata[2].newsaddress)
  //随机数0-9,把它赋值给ran
  ran.value = Math.floor(Math.random() * 10)
  ran1.value = ran.value + 1;
  if(ran.value >= 9){
    ran1.value = 0;
  }
  a.value = channel.newsListdata[ran.value].newsaddress
  b.value = channel.newsListdata[ran1.value].newsaddress

}

//挂载时调用
onMounted(() => {
  console.log("312312")
  setTimeout(()=>{
    aaa();
  },500)
  channel.userlogin();
  // 3分钟执行一次
  setInterval(() => {
    aaa();
}, 180000)
})
//用户名
const username = ref('')
//密码
const password = ref('')
//登录功能
const login = () => {
  //判断用户名和密码是否正确,json格式的文件channel.userlogin()包含账号密码
  for (let i = 0; i < channel.loginList.length; i++) {
    if (username.value === channel.loginList[i].account && password.value === channel.loginList[i].password) {

      //弹出的成功提示框
      ElMessage({
        message: '欢迎您登录风行旅途火车购票系统！',
        type: 'success',
      })
      channel.isLogin = true
      channel.logininfoid = channel.loginList[i].userID
      //判断是否是管理员权限
      if(channel.loginList[channel.logininfoid-1].userRole === "管理员"){
        channel.adminLogin = true
      }else{
        channel.adminLogin = false
      }

      return;
    }
  }
  //如果没有登录弹出的失败提示框
  if(channel.isLogin === false){
    ElMessage.error('登录失败，请检查账号密码是否正确！')
  }

  // if (username.value === '123' && password.value === '123') {
  //   //弹出的成功提示框
  //   ElMessage({
  //   message: '欢迎您登录12306铁路购票系统！',
  //   type: 'success',
  // })
  //   channel.isLogin = true
  //   console.log(channel.isLogin)
  // }else{
  //   //弹出的失败提示框
  //   ElMessage.error('登录失败，请检查账号密码是否正确！')
  // }
}
</script>


<style lang="css" scoped>
.fourbox_  .smallbox .img{
  width: 100%; 
  height: 100%;
   object-fit:contain
}
.menu_ .menu1{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 15px;
}
.menu_{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.menu_ .menu1_img{
  width: 50px;
  height: 50px;
}
.allbtn .btu1, .btu2 {
  width: 120px;
  height: 50px;
  margin-top: 50px;
}
.login{
  display: flex;
  flex-direction: column;
  justify-content:center;
  align-items: center;
}
.login .title {
  font-size: 25px;
  text-align: center;
  margin-bottom: 30px;
}
.login .input1 {
  width: 50%;
    height: 34px;
    margin-top: 27px;
    border-radius: 10px;
    border: 1px solid #ccc;
    padding-left: 10px;
}
/* 这些是大图片的css */
.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
  height: 100%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
/* 这些是大图片的css */
.bigimage_ {
  width: 100%;
  height: 450px;
  position: relative;
}

.menu_ {
  width: 80%;
  height: 100px;
  margin: 0 auto;
}

.fourbox_ {
  width: 80%;
  height: 200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.login{
  top: 0;
  left: 0;
  width: 550px;
  height: 400px;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 999;
  margin-left: 10%;
  margin-top: 25px;
  border-radius: 10px;
}

.img2{
  width: 100%;
  height: 100%;
  object-fit: cover;
}


</style>
